<template>
 <div>
    <el-table :data="bookList" style="width: 100%"
    :default-sort = "{prop: 'firstEditionDate', order: 'descending'}"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="封面">
          <template slot-scope="scope">
          <img :src="scope.row.cover" alt="Book Cover" style="width: 50px; height: 70px;">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="书名"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="firstEditionDate" label="出版日期" sortable :sort-method="dateSort"></el-table-column>
      <el-table-column prop="category" label="类别"></el-table-column>
      <el-table-column label="操作">
         <template slot-scope="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'bookList',
  data () {
    return {
    }
  },
  created () {
    this.$store.dispatch('Book/getList')
  },
  computed: {
    ...mapState('Book', ['bookList'])
  },
  methods: {
    handleDelete (id) {
      console.log(id)
      // 使用 Element UI 的 MessageBox 进行确认操作
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认后的操作，例如显示删除成功的消息
        this.$store.dispatch('Book/deleteBook', id)
        this.$message.success('删除成功')
      }).catch(() => {
        // 取消操作的处理
        this.$message.info('已取消删除')
      })
    },
    dateSort (a, b) {
      const dateA = new Date(a.firstEditionDate)
      const dateB = new Date(b.firstEditionDate)
      if (dateA < dateB) {
        return -1
      } else if (dateA > dateB) {
        return 1
      } else {
        return 0
      }
    },
    ...mapActions('Book', ['getList', 'deleteBook'])
  }
}
</script>
<style lang="less">
.el-table {
    border: 1px solid #ddd;
    border-radius: 6px;
  }
.el-table th,
.el-table td {
    padding: 10px;
    text-align: center;
  }
.el-button {
    margin-right: 5px;
  }
</style>
